<style lang="scss">
	page{
		background: #F5F5F5;
		// padding-top: 30upx;
		.all{
			width: 750upx;
			.top{
				width: 750upx;
				background: #FFFFFF;
				display: flex;
				.top_box{
					padding: 30upx 0;
					text-align: center;
					width: 250upx;
					height: 42upx;
					font-size: 30upx;
					font-weight: bold;
					color: #A02731;
					line-height: 42upx;
					.top_box_text{
						padding-bottom: 30upx;
						border-bottom: 1upx solid #A02731;
					}
				}
				.top_box_new{
					padding: 30upx 0;
					text-align: center;
					width: 250upx;
					height: 42upx;
					font-size: 30upx;
					font-weight: bold;
					color: #999999;
					line-height: 42upx;
					.top_box_text{
						padding-bottom: 30upx;
						border-bottom: 1upx solid rgba($color: #000000, $alpha: 0);
					}
				}
			}
			.list{
				padding: 25upx;
				width: 700upx;
				margin-top: 22upx;
				background: #FFFFFF;
				.list_image{
					width: 700upx;
					height: 262upx;
				}
			}
			.list_box{
				width: 750upx;
				padding: 25upx 0;
				background: #FFFFFF;
				border-bottom: 1upx solid #C9C9C9;
				display: flex;
				.list_box_text{
					margin-left: 25upx;
					width: 166upx;
					height: 42upx;
					font-size: 30upx;
					font-weight: 400;
					color: #333333;
					line-height: 42upx;
				}
				.list_box_input{
					margin-left: 38upx;
					width: 328upx;
					height: 40upx;
					font-size: 28upx;
					font-weight: 400;
					color: #222222;
					line-height: 40upx;
				}
				.list_box_code{
					width: 164upx;
					height: 62upx;
					background: #FFFFFF;
					border-radius: 4upx;
					border: 2upx solid #A02731;
					text-align: center;
					line-height: 62upx;
					color: #A02731;
					font-size: 24upx;
				}
			}
			.anniu{
				width: 690upx;
				height: 88upx;
				background: #A02731;
				border-radius: 8upx;
				text-align: center;
				line-height: 88upx;
				font-size: 32upx;
				color: #FFFFFF;
				margin-left: 30upx;
				margin-top: 70upx;
			}
		}
	}
</style>
<template>
	<view class="all">
		<!-- <view class="top">
			<view :class="is_select == 1?'top_box':'top_box_new'" @click="select_tap(1)"> <text class="top_box_text">银联</text> </view>
			<view :class="is_select == 2?'top_box':'top_box_new'" @click="select_tap(2)"> <text class="top_box_text">微信</text> </view>
			<view :class="is_select == 3?'top_box':'top_box_new'" @click="select_tap(3)"> <text class="top_box_text">支付宝</text> </view>
		</view> -->
		<view v-if="is_select == 1">
			<!-- <view class="list">
				<image class="list_image" @click="shangchuan" mode="aspectFill" :src="image_a"></image>
			</view> -->
			<view class="list_box">
				<view class="list_box_text"> 手机号 <text style="color: #F43140;">*</text> </view>
				<view class="list_box_input">{{phone}}</view>
			</view>
			<view class="list_box">
				<view class="list_box_text"> 银行卡姓名 <text style="color: #F43140;">*</text> </view>
				<input placeholder="请输入银行卡姓名" :value="user_name" @input="user_name_input" class="list_box_input" />
			</view>
			<view class="list_box">
				<view class="list_box_text"> 开户银行 <text style="color: #F43140;">*</text> </view>
				<input placeholder="请输入开户银行" :value="bank" @input="bank_input" class="list_box_input" />
			</view>
			<view class="list_box">
				<view class="list_box_text"> 开户支行 <text style="color: #F43140;">*</text> </view>
				<input placeholder="请输入开户支行" :value="bank_address" @input="bank_address_input" class="list_box_input" />
			</view>
			<view class="list_box">
				<view class="list_box_text"> 银行卡号 <text style="color: #F43140;">*</text> </view>
				<input placeholder="请输入银行卡号" :value="bank_card" @input="bank_card_input" type="number" class="list_box_input" />
			</view>
			<!-- <view class="list_box" style="border: 0;">
				<view class="list_box_text" style="margin-top: 15upx;"> 动态验证码 <text style="color: #F43140;">*</text> </view>
				<input :value="code" placeholder="请输入短信验证码" @input="code_input" style="margin-top: 15upx;" class="list_box_input" />
				<view class="list_box_code" v-if="showText_now==true" @click.stop="code_tap">获取验证码</view>
				<view v-if="showText_now!=true" class="list_box_code">{{second_now}}s重新发送</view>
				
			</view> -->
			<view class="anniu" @click="anniu">保存</view>
		</view>
		<view v-if="is_select == 2">
			<view class="list">
				<image class="list_image"  mode="aspectFill" :src="image_b"></image>
				<view style="position: relative;display: flex;"> <view style="width: 50%;background: #18BC37;padding: 20upx;text-align: center;font-size: 22upx;color: #FFFFFF;border-radius: 20upx;" @click="shangchuan_b">上传</view> <view style="width: 50%; background: #A02731;padding: 20upx;border-radius: 20upx; text-align: center;font-size: 22upx;color: #FFFFFF;" @click="previewImage_tap">预览</view> </view>
			</view>
			<!-- <view class="list_box">
				<view class="list_box_text"> 手机号 <text style="color: #F43140;">*</text> </view>
				<view class="list_box_input">{{phone}}</view>
			</view> -->
			<!-- <view class="list_box">
				<view class="list_box_text"> 微信账号 <text style="color: #F43140;">*</text> </view>
				<input placeholder="请输入微信账号" :value="wechat" @input="wechat_input" class="list_box_input" />
			</view>
			<view class="list_box" style="border: 0;">
				<view class="list_box_text" style="margin-top: 15upx;"> 动态验证码 <text style="color: #F43140;">*</text> </view>
				<input :value="code" placeholder="请输入短信验证码" @input="code_input" style="margin-top: 15upx;" class="list_box_input" />
				<view class="list_box_code" v-if="showText_now==true" @click.stop="code_tap">获取验证码</view>
				<view v-if="showText_now!=true" class="list_box_code">{{second_now}}s重新发送</view>
			</view> -->
			<view class="anniu" @click="anniu_a">保存</view>
		</view>
		<view v-if="is_select == 3">
			<view class="list">
				<image class="list_image" mode="aspectFill" :src="image_c"></image>
				<view style="position: relative;display: flex;"> <view style="width: 50%;background: #18BC37;padding: 20upx;text-align: center;font-size: 22upx;color: #FFFFFF;border-radius: 20upx;" @click="shangchuan_c">上传</view> <view style="width: 50%; background: #A02731;padding: 20upx;border-radius: 20upx; text-align: center;font-size: 22upx;color: #FFFFFF;" @click="previewImage_tapa">预览</view> </view>
			</view>
			<!-- <view class="list_box">
				<view class="list_box_text"> 手机号 <text style="color: #F43140;">*</text> </view>
				<view class="list_box_input">{{phone}}</view>
			</view>
			<view class="list_box">
				<view class="list_box_text"> 支付宝账号 <text style="color: #F43140;">*</text> </view>
				<input placeholder="请输入支付宝账号" :value="alipay" @input="alipay_input" class="list_box_input" />
			</view>
			<view class="list_box" style="border: 0;">
				<view class="list_box_text" style="margin-top: 15upx;"> 动态验证码 <text style="color: #F43140;">*</text> </view>
				<input :value="code" placeholder="请输入短信验证码" @input="code_input" style="margin-top: 15upx;" class="list_box_input" />
				<view class="list_box_code" v-if="showText_now==true" @click.stop="code_tap">获取验证码</view>
				<view v-if="showText_now!=true" class="list_box_code">{{second_now}}s重新发送</view>
			</view> -->
			<view class="anniu" @click="anniu_b">保存</view>
		</view>
	</view>
</template>
<script>
	import urlConfig from '../../common/config.js'; 
	export default {
		data() {
			return {
				showText_now:true,
				is_select:1,
				is_status:'',
				phone:'',
				user_name:'',
				bank:'',
				bank_address:'',
				code:'',
				second_now:60,
				image_a:'../../static/64.png',
				image_b:'../../static/0.png',
				image_c:'../../static/62.png',
				wechat:'',
				alipay:'',
				bank_card:''
			}
		},
		onLoad() {
			if( !uni.getStorageSync('access_token') ) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					cancelText:'返回',
					confirmColor:'#A02731',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.reLaunch({
								url:'../disembark/disembark'
							})
						} else if (res.cancel) {
							wx.closeWindow()
						}
					}
				});
			}
			this.user_api()
		},
		methods: {
			alipay_input(num) {
				this.alipay = num.detail.value
			},
			wechat_input(num) {
				this.wechat = num.detail.value
			},
			phone_input(num) {
				this.phone = num.detail.value
			},
			user_name_input(num) {
				this.user_name = num.detail.value
			},
			bank_input(num) {
				this.bank = num.detail.value
			},
			bank_address_input(num) {
				this.bank_address = num.detail.value
			},
			code_input(num) {
				this.code = num.detail.value
			},
			bank_card_input(num) {
				this.bank_card = num.detail.value
			},
			//获取验证码
			code_tap() {
				if( this.phone != '' && this.phone.length == 11 ) {
					this.showText_now = false
					this.acquire_api(this.phone) //获取验证码
					var interval = setInterval(() => {
					    let times = --this.second_now
					    this.second_now = times<10?'0'+times:times //小于10秒补 0
					}, 1000)
					setTimeout(() => {
					    clearInterval(interval)
					    this.second_now=60
					    this.showText_now = true
					}, 60000)
				}else{
					uni.showToast({
						title: '请输入正确手机号',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			acquire_api(phone) {
				var that = this
				uni.request({
					url: urlConfig.Url + 'sms/sms',
					data:{
						access_token:uni.getStorageSync('access_token'),
						phone:phone
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data.code == 0) {
						} else if (res.data.code == -1) {	
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none'
							});
						}
					}
				});
			},
			anniu() {
				var that = this
				// if( that.image_a != '../../static/64.png' ) {
					if(that.user_name != '') {
						if(that.phone != '') {
							if(that.bank != '') {
								if(that.bank_address != '') {
									// if(that.code != '') {
										var data = {
											bank_name:that.user_name,
											phone:that.phone,
											bank:that.bank,
											bank_card:that.bank_card,
											bank_img:that.image_a,
											bank_address:that.bank_address,
											code:that.code,
											access_token:uni.getStorageSync('access_token')
										}
										uni.request({
											url: urlConfig.Url + 'api/user/bank',
											data:data,
											method: 'POST',
											header: {
												'content-type': 'application/x-www-form-urlencoded'
											},
											success: (res) => {
												if (res.data.code == 0) {
													uni.showToast({
														title: '保存成功',
														duration: 2000,
														icon: 'none'
													});
													setTimeout(function () {
													    uni.navigateBack({
													    	delta:1
													    })
													}, 2000);
												} else if (res.data.code == -1) {	
												} else {
													uni.showToast({
														title: res.data.msg,
														duration: 2000,
														icon: 'none'
													});
												}
											}
										});
								}else{
									uni.showToast({
										title: '请输入支行',
										duration: 2000,
										icon: 'none'
									});
								}
							}else{
								uni.showToast({
									title: '请输入开户行',
									duration: 2000,
									icon: 'none'
								});
							}
						}else{
							uni.showToast({
								title: '请输入手机号',
								duration: 2000,
								icon: 'none'
							});
						}
					}else{
						uni.showToast({
							title: '请输入名字',
							duration: 2000,
							icon: 'none'
						});
					}
				// }else{
				// 	uni.showToast({
				// 		title: '请上传银行卡',
				// 		duration: 2000,
				// 		icon: 'none'
				// 	});
				// }
			},
			shangchuan() {
				var that = this
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
						    title: '上传中'
						});
				        uni.uploadFile({
				            url: urlConfig.Url + 'upload/save-img',
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								uni.hideLoading();
				                console.log(uploadFileRes.data);
								that.image_a = uploadFileRes.data
				            }
				        });
				    }
				});
			},
			shangchuan_b() {
				var that = this
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
						    title: '上传中'
						});
				        uni.uploadFile({
				            url: urlConfig.Url + 'upload/save-img',
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								uni.hideLoading();
				                console.log(uploadFileRes.data);
								that.image_b = uploadFileRes.data
				            }
				        });
				    }
				});
			},
			shangchuan_c() {
				var that = this
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
						    title: '上传中'
						});
				        uni.uploadFile({
				            url: urlConfig.Url + 'upload/save-img',
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								uni.hideLoading();
				                console.log(uploadFileRes.data);
								that.image_c = uploadFileRes.data
				            }
				        });
				    }
				});
			},
			previewImage_tap() {
				var that = this
				var images = [that.image_b]
				uni.previewImage({
					urls: images,
					current:that.image_b,
					longPressActions: {
						itemList: [],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			previewImage_tapa() {
				var that = this
				var images = [that.image_c]
				uni.previewImage({
					urls: images,
					current:that.image_c,
					longPressActions: {
						itemList: [],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			anniu_a() {
				var that = this
				if( that.image_b != '../../static/0.png' ) {
					var data = {
						bank_name:that.user_name,
						phone:that.phone,
						bank:that.bank,
						bank_card:that.bank_card,
						bank_img:that.image_a,
						bank_address:that.bank_address,
						wechat_img:that.image_b,
						access_token:uni.getStorageSync('access_token')
					}
					uni.request({
						url: urlConfig.Url + 'api/user/bank',
						data:data,
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						success: (res) => {
							if (res.data.code == 0) {
								uni.showToast({
									title: '保存成功',
									duration: 2000,
									icon: 'none'
								});
								setTimeout(function () {
								    uni.navigateBack({
								    	delta:1
								    })
								}, 2000);
							} else if (res.data.code == -1) {	
							} else {
								uni.showToast({
									title: res.data.msg,
									duration: 2000,
									icon: 'none'
								});
							}
						}
					});
				}
			},
			anniu_b() {
				var that = this
				if( that.image_c != '../../static/62.png' ) {
					var data = {
						bank_name:that.user_name,
						phone:that.phone,
						bank:that.bank,
						bank_card:that.bank_card,
						bank_img:that.image_a,
						bank_address:that.bank_address,
						wechat_img:that.image_b,
						alipay_img:that.image_c,
						access_token:uni.getStorageSync('access_token')
					}
					uni.request({
						url: urlConfig.Url + 'api/user/bank',
						data:data,
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						success: (res) => {
							if (res.data.code == 0) {
								uni.showToast({
									title: '保存成功',
									duration: 2000,
									icon: 'none'
								});
								setTimeout(function () {
								    uni.navigateBack({
								    	delta:1
								    })
								}, 2000);
							} else if (res.data.code == -1) {	
							} else {
								uni.showToast({
									title: res.data.msg,
									duration: 2000,
									icon: 'none'
								});
							}
						}
					});
				}
			},
			//选中
			select_tap(num) {
				this.is_select = num
				if( num == 2 ) {
					// this.wechat = ''
				}else if( num == 3 ) {
					// this.alipay = ''
				}
			},
			//获取user
			user_api() {
				var that = this
				that.$request(that.$Api.user_person_api, {
					access_token: uni.getStorageSync('access_token'),
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.is_status = res.data.data.status
						if( res.data.data.list.bank_img != null) {
							that.image_a = res.data.data.list.bank_img
						}
						if( res.data.data.list.wechat_img != null) {
							that.image_b = res.data.data.list.wechat_img 
						}
						if( res.data.data.list.alipay_img != null) {
							that.image_c = res.data.data.list.alipay_img 
						}
						if( res.data.data.list.bank_name != null) {
							that.user_name = res.data.data.list.bank_name 
						}
						if( res.data.data.list.phone != null) {
							that.phone = res.data.data.list.phone 
						}
						if( res.data.data.list.bank != null) {
							that.bank = res.data.data.list.bank 
						}
						if( res.data.data.list.bank_address != null) {
							that.bank_address = res.data.data.list.bank_address 
						}
						if( res.data.data.list.wechat != null) {
							that.wechat = res.data.data.list.wechat 
						}
						if( res.data.data.list.alipay != null) {
							that.alipay = res.data.data.list.alipay 
						}
						if( res.data.data.list.bank_card != null) {
							that.bank_card = res.data.data.list.bank_card 
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
		}
	}
</script>
















